<html>
      <head>
            <script type="text/javascript">
                  function draw(){
                        var canvas = document.getElementById('map');
                        if (canvas.getContext){
                              var ctx = canvas.getContext('2d');

                              ctx.fillStyle = "blue";
                              ctx.beginPath();
                              ctx.moveTo(0,0);
                              ctx.lineTo(300,0);
                              ctx.lineTo(400,200);
                              ctx.lineTo(0, 500)
                              ctx.fill();

                              ctx.fillStyle = "red";
                              ctx.beginPath();
                              ctx.moveTo(300,0);
                              ctx.lineTo(700,0);
                              ctx.lineTo(700,100);
                              ctx.lineTo(600, 400)
                              ctx.lineTo(400, 200);
                              ctx.fill();

                              ctx.fillStyle = "green";
                              ctx.beginPath();
                              ctx.moveTo(700,0);
                              ctx.lineTo(1000,0);
                              ctx.lineTo(1000,400);
                              ctx.lineTo(600, 400)
                              ctx.lineTo(700, 100);
                              ctx.fill();

                        }
                  }
            </script>
      </head>
      <body onload="draw();">
      <canvas id="map" width="1000" height="1000"></canvas>
      <svg  xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink">
            <rect x="10" y="10" height="100" width="100"
                  style="stroke:#ff0000; fill: #0000ff"/>
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg"
           xmlns:xlink="http://www.w3.org/1999/xlink">

            <rect x="10" y="10" height="110" width="110"
                  style="stroke:#ff0000; fill: #0000ff">

                  <animateTransform
                        attributeName="transform"
                        begin="0s"
                        dur="20s"
                        type="rotate"
                        from="0 60 60"
                        to="360 60 60"
                        repeatCount="indefinite"
                        />
            </rect>

      </svg>
</body>
</html>